<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-common-work_bench container">
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :autoFill="false">
        <swipeout>
          <swipeout-item
            ref="swipeoutItem"
            :right-menu-width="30"
            :sensitivity="15"
            v-for="(item, key) in sales_return_billData"
            :key="key"
            :auto-close-on-button-click="false">
            <div slot="right-menu">
              <swipeout-button
                style="background-color: #f0ad4e;"
                @click.native="examine(item,key);" type="primary">
                审核
              </swipeout-button>
              <swipeout-button style="background-color: #dd524d;" @click.native="checkProcess(item,key)" type="primary">
                流程
              </swipeout-button>
            </div>
            <div slot="content" class="demo-content vux-1px-b">
              <ul>
                <li ref="oli" class="mui-selected vm-work_bench-item mui-table-view-cell">
                  <router-link class="mui-slider-handle" tag="div" :to="`/common_details/${item.id}/退货审批`">
                    <h5 class="vm-work_bench-item-title">
                      <h3>退货单号：{{ item.returnNumber }}</h3>
                      <x-icon type="ios-arrow-right" size="22"></x-icon>
                    </h5>
                    <div class="vm-work_bench-item-body">
                      <div>
                        <span>关联编号：</span>
                        <em>{{ item.contractCode }}</em>
                      </div>
                      <div>
                        <span>供应商：</span>
                        <em>{{ item.cCompanyName }}</em>
                      </div>
                      <div>
                        <span>质检员：</span>
                        <em>{{ item.inspecName }}</em>
                      </div>
                      <div>
                        <span>状态：</span>
                        <em class="is-status-o" v-if="item.istatus == 1">已审批</em>
                        <em class="is-status-n" v-else>未审批</em>
                      </div>
                      <div>
                        <span>退货日期：</span>
                        <em>{{ item.reTime }}</em>
                      </div>
                      <div>
                        <span>审批人：</span>
                        <em>{{ item.auName }}</em>
                      </div>
                      <div>
                        <span>退货原因：</span>
                        <em>{{ item.reason }}</em>
                      </div>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </swipeout-item>
        </swipeout>
        <vm-common-noData v-if="!sales_return_billData.length"></vm-common-noData>
      </mt-loadmore>
    </div>
    <!-- 审批弹框 -->
    <mt-popup
      v-model="examineStatus"
      position="bottom"
      class="vm-examine-warp">
      <div class="examine-warp">
        <div class="examine-t">
          <i class="vm-icon examine"></i>
          <h5>审核</h5>
        </div>
        <div class="examine-b">
          <div class="examine-b-btn">
            <mt-button :class="[{'active': isActive1}]" @click="isActive1 = true;isActive2 = false;">通过</mt-button>
            <mt-button :class="[{'active': isActive2}]" size="small" @click="isActive2 = true;isActive1 = false;">不通过
            </mt-button>
          </div>
          <div class="examine-b-con">
            <div class="examine-b-con-reason">
              <i class="vm-icon reason"></i>
              <h5>原因</h5>
            </div>
            <input type="text" v-model="reasonData" class="examine-b-con-reason" placeholder="请输入内容">
          </div>
        </div>
        <div class="examine-f">
          <mt-button type="danger" @click="submitExamine">提交</mt-button>
        </div>
      </div>
    </mt-popup>

    <!-- 查看审批流程 -->
    <vm-common-examine-process
      ref="examine_process"
      @close="closeSwipeout"></vm-common-examine-process>
  </div>
</template>

<script>
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import {Swipeout, SwipeoutItem, SwipeoutButton} from 'vux'
  import {MessageBox} from 'mint-ui'
  import {getreturnSlipList} from '@/api/work_bench.js'
  import {vmCommonCheckExamine, vmCommondoworkflow} from '@/utils/vm-common-work_bench.js'

  export default {
    data() {
      return {
        pageTitle: this.$route.meta.pageTitle, // page标题
        goBack: this.$route.meta.goBack, // 是否返回
        sales_return_billData: new Array(),
        tempListData: new Array(),
        tempIndex: null,
        sales_return_billPage: 1, //当前页数
        allLoaded: false, // 是否还有数据
        examineStatus: false,
        reasonData: '', // 审批内容
        isActive1: false,
        isActive2: false
      }
    },
    created() {
      this.gettesting_billPageData();
    },
    methods: {
      // 获取退货单数据
      gettesting_billPageData(loadmoreType) {
        let sales_return_billPage = this.sales_return_billPage;
        getreturnSlipList(sales_return_billPage).then(res => {
          if (!res.data.data.length) {
            this.allLoaded = true; // 若数据已全部获取完毕
          }
          if (!this.sales_return_billData.length || sales_return_billPage == 1) {
            this.allLoaded = false;
            this.sales_return_billData = res.data.data;
          } else {
            this.sales_return_billData = this.sales_return_billData.concat(res.data.data);
          }
          console.log(this.sales_return_billData);
          if (loadmoreType == 'top') {
            this.$refs.loadmore.onTopLoaded();
          } else if (loadmoreType == 'bottom') {
            this.$refs.loadmore.onBottomLoaded();
          }
        })
      },
      // 下拉刷新
      loadTop() {
        this.sales_return_billPage = 1;
        this.gettesting_billPageData('top');
      },
      // 上拉加载
      loadBottom() {
        this.sales_return_billPage++;
        this.gettesting_billPageData('bottom');
      },
      // 点击审批操作
      examine(item, key) {
        let data = this.sales_return_billData;
        let index = key;
        vmCommonCheckExamine(item, index, data, this, {
          flag: 'istatus',
          id: 'id',
          item_objType: 'returnslip'
        });
      },
      // 点击审批
      submitExamine() {
        vmCommondoworkflow(this.sales_return_billData, this, {
          flag: 'istatus',
          id: 'id',
          item_objType: 'returnslip'
        })
      },
      // 关闭右侧滑出弹窗
      closeSwipeout(flag) {
        if (!flag) {
          for (let o of this.$refs.swipeoutItem) {
            o.close();
          }
        }
      },
      // 查看审批流程
      checkProcess(item, key) {
        this.$refs.examine_process.init(item, key, {
          id: 'id',
          objType: 'returnslip'
        });
      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton
    },
    watch: {
      examineStatus(newV) {
        if (!newV) {
          for (let o of this.$refs.swipeoutItem) {
            o.close();
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .vm-work_bench-item-body div {
    text-align: left;
    width: 100% !important;
    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6),
    &:nth-child(7),
    &:nth-child(8) {
      width: 50% !important;;
    }
  }
</style>
